<template>
  <div class="main_wrap">
    <div class="topic_wrap">
      <div class="topic_title">
        <span class="title_name">测试名称：</span>
        <span class="title_content">
          <a-input v-model="title" @blur="inputBlur" ref="input"></a-input>
        </span>
        <span class="title_selectData"> {{ endTime }} </span>
      </div>
      <div
        class="topic_item"
        v-for="(item, index) in EditTopicData"
        :key="index"
      >
        <div class="topic_index">{{ index + 1 }}.</div>
        <div class="topic_content">{{ item }}</div>
        <div class="topic_seting">
          <a-button
            type="primary"
            size="small"
            icon="edit"
            @click="alterTopic('编辑题目', index)"
            >编辑</a-button
          >
          <a-popconfirm
            title="确定要删除这条题目？"
            ok-text="确定"
            cancel-text="取消"
            @confirm="removeItem(index)"
          >
            <a-button type="danger" size="small"> 删除 </a-button>
          </a-popconfirm>
        </div>
      </div>
    </div>
    <div class="add_topic" @click="addTopic('添加题目')">
      <span>
        <a-icon type="plus" />
      </span>
      <span>添加题目</span>
    </div>
    <div class="topic_submit">
      <a-button type="primary" ghost @click="submitTopic"> 完成 </a-button>
    </div>

    <!-- 抽屉组件 -->
    <a-drawer
      :title="drawerTitle"
      placement="right"
      :closable="false"
      :visible="visible"
      @close="onClose"
      width="20%"
    >
      <a-select default-value="简答题">
        <a-select-option value="简答题"> 简答题 </a-select-option>
        <a-select-option value="单选题" disabled> 单选题 </a-select-option>
        <a-select-option value="多选题" disabled> 多选题 </a-select-option>
      </a-select>
      <div class="textarea_item">
        <a-textarea placeholder="请出题" :rows="4" v-model="textContent" />
      </div>
      <div class="btn_item">
        <a-button icon="check" @click="ChangeTopicData"> 完成 </a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      drawerTitle: "",
      visible: false,
      textContent: "",
      endTime: "2020-11-10",
      activeIndex: 0, //编辑题目选择的索引
      isAdd: false,
    };
  },
  mounted() {
    this.$refs.input.focus();
  },
  computed: {
    ...mapState("Teacher", ["selectedKeys"]),
    ...mapState("TeacherGroup", ["EditTopicData", "EditTopicId", "EditTitle"]),
    title: {
      get() {
        return this.EditTitle;
      },
      set(value) {
        this.setEditTopicTitle(value);
      },
    },
  },
  methods: {
    ...mapMutations("TeacherGroup", [
      "setEditTopicTitle",
      "addEdittopicData",
      "editEdittopicData",
      "removeEdittopicData",
      "removePandesData",
    ]),
    inputBlur() {
      if (this.title.length <= 0) {
        this.title = this.DefalultContent();
      }
    },
    alterTopic(title, index) {
      this.visible = true;
      this.drawerTitle = title;
      this.textContent = this.EditTopicData[index];
      this.activeIndex = index;
      this.isAdd = false;
    },
    removeItem(index) {
      this.removeEdittopicData(index);
    },
    addTopic(title) {
      this.visible = true;
      this.drawerTitle = title;
      this.textContent = "";
      this.isAdd = true;
    },
    submitTopic() {
      if (this.EditTopicData.length <= 0) {
        this.$message.warning("请至少添加一条题目");
        return;
      }
      var param = {
        name: this.title,
        groupID: this.selectedKeys[0],
        endTime: this.endTime,
        topic: this.EditTopicData,
        id: this.EditTopicId,
      };
      this.$api.IssueExercise(param).then((res) => {
        if (res.data.result) {
          this.removePandesData();
          this.$message.success("保存成功");
        }
      });
    },
    onClose() {
      this.visible = false;
    },
    ChangeTopicData() {
      if (this.textContent.length <= 0) {
        this.$message.warning("题目不能为空");
        return;
      }
      if (this.isAdd) this.addEdittopicData(this.textContent);
      else
        this.editEdittopicData({
          textContent: this.textContent,
          index: this.activeIndex,
        });
      this.visible = false;
    },
    DefalultContent() {
      var nowDate = new Date();
      let date = {
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      };
      return date.month + "月" + date.date + "日测试";
    },
  },
};
</script>

<style lang="less" scoped>
.main_wrap {
  width: 50%;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 1%;

  .topic_wrap {
    .topic_title {
      margin: 1% 4% 3% 4%;
      font-size: 18px;
      font-weight: 600;
      display: flex;
      align-items: center;
      .title_content {
        .ant-input {
          border: none;
          border-radius: 0;
          border-bottom: 1px solid #ccc;
        }
      }
      .title_selectData {
        width: 40%;
        text-align: right;
      }
    }
    .topic_item {
      border-bottom: 1.5px solid #ccc;
      width: 70%;
      margin: 0 auto;
      display: flex;
      padding: 1%;

      .topic_index {
        width: 10%;
        text-align: center;
        font-weight: 600;
        position: relative;

        &::before {
          content: "*";
          color: red;
          position: absolute;
          top: 10%;
          left: 15%;
        }
      }

      .topic_content {
        width: 60%;
        word-wrap: break-word;
      }

      .topic_seting {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30%;

        .ant-btn-primary {
          margin: 0 2%;
          background-color: #e6a23c;
          border: none;
        }
      }
    }
  }

  .add_topic {
    border: 1px dashed #ccc;
    width: 30%;
    margin: 2% auto;
    font-weight: 600;
    text-align: center;
    padding: 1%;
    transition: all 0.5s;

    &:hover {
      color: #7b9e31;
      border: 1px solid #7b9e31;
      cursor: pointer;
    }

    span {
      margin: 0px 1%;
    }
  }

  .topic_submit {
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-direction: row-reverse;

    .ant-btn {
      border: none;
      border: 1px solid #7b9e31;
      color: #7b9e31;
      padding: 0 30px;
      font-size: 16px;
    }
  }
}

.textarea_item {
  margin: 5% 0;
}

.btn_item {
  display: flex;
  flex-direction: row-reverse;
}
</style>